<template>
  <div>
    <video-player
      style="width: 800px"
      class="video-player-box"
      ref="videoPlayer"
      :options="playerOptions"
      :playsinline="true"
      customEventName="customstatechangedeventname"
      @play="onPlayerPlay($event)"
      @pause="onPlayerPause($event)"
      @statechanged="playerStateChanged($event)"
      @ready="playerReadied"
    >
    </video-player>
  </div>
</template>

<script>
// @ended="onPlayerEnded($event)" @waiting="onPlayerWaiting($event)"
// @playing="onPlayerPlaying($event)" @loadeddata="onPlayerLoadeddata($event)"
// @timeupdate="onPlayerTimeupdate($event)" @canplay="onPlayerCanplay($event)"
// @canplaythrough="onPlayerCanplaythrough($event)"

// Similarly, you can also introduce the plugin resource pack you want to use within the component
// import 'some-videojs-plugin'
export default {
  props: {
    viewUrl: {
      type: String,
      default:
        'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm'
    }
  },
  data () {
    return {
      playerOptions: {
        // videojs options
        muted: true,
        language: 'zh-ch',
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [
          {
            type: 'video/webm',
            src: this.viewUrl
          }
        ],
        poster: '/static/images/author.jpg',

        preload: 'auto'
      }
    }
  },
  mounted () {
    console.log('this is current player instance object', this.player)
  },
  computed: {
    player () {
      return this.$refs.videoPlayer.player
    }
  },
  // created: {this.sources},
  methods: {
    // listen event
    onPlayerPlay (player) {
      // console.log('player play!', player)
    },
    onPlayerPause (player) {
      // console.log('player pause!', player)
    },
    // ...player event

    // or listen state event
    playerStateChanged (playerCurrentState) {
      // console.log('player current update state', playerCurrentState)
    },

    // player is ready
    playerReadied (player) {
      console.log('the player is readied', player)
      // you can use it to do something...
      // player.[methods]
    }
  }
}
</script>

<style></style>
